<template>
    <div class="addAdmin">
        <h2 style="text-align:center ; margin:20px">普通管理员新增</h2>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"


            
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" >
                <el-input v-model="ruleForm.account" @blur="isAdmins(ruleForm)"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    type="passwordword"
                    v-model="ruleForm.password"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpassword">
                <el-input
                    type="passwordword"
                    v-model="ruleForm.checkpassword"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model.number="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";

const {
    mapState: adminsMapState,
    mapMutations: adminsMapMutations,
    mapActions: adminsMapActions,
} = createNamespacedHelpers("admins");

export default {
    data() {
        var checkphone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("联系电话不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入数字值"));
                } else {
                    callback();
                }
            }, 1000);
        };
        var validatepassword = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkpassword !== "") {
                    this.$refs.ruleForm.validateField("checkpassword");
                }
                callback();
            }
        };
        var validatepassword2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                password: "",
                checkpassword: "",
                phone: "",
                account: "",
            },
            rules: {
                password: [{ validator: validatepassword, trigger: "blur" }],
                checkpassword: [
                    { validator: validatepassword2, trigger: "blur" },
                ],
                phone: [{ validator: checkphone, trigger: "blur" }],
            },
        };
    },
    methods: {
        ...adminsMapActions(["addAdmins","isAdmins"]),

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //新增管理员
                    this.addAdmins(this.ruleForm);

                } else {
                    alert("请正确输入");
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>
<style lang="scss">
.addAdmin {
    width: 50%;
    margin: 0 auto;
    box-shadow: 0 0 5px black;
    padding: 10px;
}
</style>